<script setup>
// 第三方模块
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 自定义模块
// 仓库
import useUserStore from "@/stores/user";
const userStore = useUserStore();

// 地址对象
const address = ref({});

// 添加地址
const create = () => {
  // 查询用户
  let user = userStore.userList.find((item) => item.name === "zhangsan");

  let ress = {
    address_text:
      address.value.address_text1 +
      " " +
      address.value.address_text2 +
      address.value.address_text3,
    name: address.value.name,
    phone: address.value.phone,
  };

  // 添加地址
  user.addressList.push(ress);
  // 是否添加成功
  console.log(userStore.userList);

  router.push({
    name: "ress",
  });
};

// 返回
const back = () => {
  router.go(-1);
};
</script>

<template>
  <div class="create_address">
    <div class="create_address_header">
      <span class="iconfont title_back" @click="back">&#xe697;</span>
      <div class="title_text">新建收货地址</div>
      <div class="save" @click="create">保存</div>
    </div>
    <div class="create_address_form">
      <div class="form_item">
        <div class="form_item_label">所在城市:</div>
        <input
          type="text"
          class="form_item_content"
          placeholder="如北京市"
          v-model.trim="address.address_text1"
        />
      </div>
      <div class="form_item">
        <div class="form_item_label">小区/大厦/学校:</div>
        <input
          type="text"
          class="form_item_content"
          placeholder="如理工大学国防科技园"
          v-model.trim="address.address_text2"
        />
      </div>
      <div class="form_item">
        <div class="form_item_label">楼号-门牌号:</div>
        <input
          type="text"
          class="form_item_content"
          placeholder="如A号楼B层"
          v-model.trim="address.address_text3"
        />
      </div>
      <div class="form_item">
        <div class="form_item_label">收货人:</div>
        <input
          type="text"
          class="form_item_content"
          placeholder="请填写收货人姓名"
          v-model.trim="address.name"
        />
      </div>
      <div class="form_item">
        <div class="form_item_label">联系电话:</div>
        <input
          type="number"
          class="form_item_content"
          placeholder="请填写收货手机号"
          v-model.trim="address.phone"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.create_address {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: 0.08rem 0.18rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: 0.24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
  }

  &_form {
    margin-top: 0.4rem;
    padding: 0 0.18rem;
    background-color: $bgColor;
    font-size: 0.14rem;

    .form_item {
      display: flex;
      padding: 0.12rem;
      line-height: 0.2rem;
      border-top: 0.01rem solid $content-bgColor;

      &_content {
        flex: 1;
        margin-left: 0.08rem;
        border: none;
        outline: none;
      }
    }
  }
}
</style>